<template>
  <div class="main">
    <div class="container">
      <div class="header">
        <h3>角色展示</h3>
      </div>
      <div class="showotherplayer">
        <table style="width: 100%;">
          <tr>
            <td>
              <div
                v-for="player in otherPlayers"
                :key="player.id"
                class="singlePlayer"
              >
                <!--如果玩家死亡的话，class=died，头像变灰-->
                <img
                  src="../assets/people.png"
                  :class="{ died: player.role_sta === 2 }"
                />
                <span class="username">
                  {{ player.name }}
                </span>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <!--      等待其他玩家进入-->
              <div v-if="currentPlayer.rolestatus === 0" class="preparing">
                <van-loading type="spinner" size="50"
                >等待其他玩家进入
                </van-loading
                >
              </div>
              <!--      开始游戏了-->
              <div class="showcurrentplayer" v-else>
                <img :src="currentPlayer.playerimage"/>
                <div class="right">
                  <span style="font-size: 16px">
                    你的身份:
                    <label class="rolename"
                    >{{ currentPlayer.role }}</label
                    >
                  </span>
                  <div>
                    <div class="status">
                      <van-divider
                        :style="{
                          color: '#14aea3',
                          borderColor: '#ffffff',
                          marginTop: '10px',
                          marginBottom: '10px'
                        }"
                      >游戏状态
                      </van-divider
                      >
                      <label
                        v-if="currentPlayer.rolestatus === 1"
                        style="font-size: 16px"
                      >存活</label
                      >
                      <label
                        v-if="currentPlayer.rolestatus === 2"
                        style="font-size: 16px"
                      >已死亡</label
                      >
                    </div>
                    <van-divider
                      :style="{
                        color: '#26c622',
                        borderColor: '#ffffff',
                        marginTop: '10px',
                        marginBottom: '10px'
                      }"
                    >角色技能
                    </van-divider
                    >
                    <div>
                      <span class="skill"
                      >{{ currentPlayer.playerskill }}</span
                      >
                    </div>
                  </div>
                </div>
              </div>


              <!--      游戏结束了，显示胜利还是失败-->
            </td>
          </tr>
        </table>
      </div>
    </div>


    <div class="footer" v-show="1">
      <van-button
        round
        color="linear-gradient(to right, #6149f6, #4bb0ff)"
        @click="refreshStatus"
        class="button_left"
      >刷新状态
      </van-button
      >
      <van-button
        round
        color="linear-gradient(to right, #4bb0ff, #6149f6)"
        @click="outRoom"
        class="button_right"
      >退出房间
      </van-button
      >
    </div>
    <van-overlay :show="currentPlayer.rolestatus === 3 || currentPlayer.rolestatus === 4" @click="toSelectMVP">
      <div class="overlay" @click="currentPlayer.rolestatus === 2">
        <div class="gameResult" v-if="currentPlayer.rolestatus === 3">
          <svg t="1595093708547" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
               p-id="5927" width="200" height="200">
            <path
              d="M511.998969 462.399984m-462.399984 0a462.399984 462.399984 0 1 0 924.799968 0 462.399984 462.399984 0 1 0-924.799968 0Z"
              fill="#2EA2DB" p-id="5928"></path>
            <path
              d="M479.999291 606.399565v235.199178l35.200677 30.401241 36.799114-30.401241 111.999903-20.798243 20.800306-99.200033-60.800419-76.801289z"
              fill="#FFFFFF" p-id="5929"></path>
            <path
              d="M881.598856 507.199533h41.600612v31.999677h-41.600612zM99.200032 507.199533h41.600613v31.999677h-41.600613z"
              fill="#193651" p-id="5930"></path>
            <path d="M904.127537 317.065966l-36.031864 20.796181-15.994683-27.715867 36.029801-20.796181z"
                  fill="#193651" p-id="5931"></path>
            <path
              d="M774.386014 131.797835L753.589833 167.825574l-27.713805-15.996745 20.796182-36.031864zM496.000161 97.599533H527.999839v41.600612h-31.999678z"
              fill="#193651" p-id="5932"></path>
            <path
              d="M296.374972 152.754891L268.661168 168.753699 247.864987 132.721834l27.713804-15.996745zM169.657073 310.60003l-16.004995 27.707617-36.023614-20.808556 16.004995-27.707617z"
              fill="#193651" p-id="5933"></path>
            <path
              d="M471.998856 662.400548h-54.400483c-16.00087 0-30.399178-12.799871-30.399179-30.399178 0-16.00087 12.799871-30.399178 30.399179-30.399179h54.400483c16.00087 0 30.399178 12.799871 30.399178 30.399179 0.002062 15.998808-14.398308 30.399178-30.399178 30.399178z"
              fill="#FFFFFF" p-id="5934"></path>
            <path
              d="M471.998856 678.399355h-54.400483c-25.599742 0-46.400048-20.800306-46.400049-46.400048 0-25.599742 20.800306-46.400048 46.400049-46.400048h54.400483c25.599742 0 46.400048 20.800306 46.400048 46.400048 0 25.599742-20.798244 46.400048-46.400048 46.400048z m-54.398421-59.199919a14.340558 14.340558 0 0 0-14.400371 14.400371 14.340558 14.340558 0 0 0 14.400371 14.40037h54.400483a14.340558 14.340558 0 0 0 14.400371-14.40037 14.340558 14.340558 0 0 0-14.400371-14.400371h-54.400483z"
              fill="#193651" p-id="5935"></path>
            <path
              d="M471.998856 721.600467h-78.399726c-16.00087 0-30.399178-12.799871-30.399178-30.399178 0-16.00087 12.799871-30.399178 30.399178-30.399178h78.399726c16.00087 0 30.399178 12.799871 30.399178 30.399178 0.002062 17.599307-14.398308 30.399178-30.399178 30.399178z"
              fill="#FFFFFF" p-id="5936"></path>
            <path
              d="M471.998856 737.599275h-78.399726c-25.599742 0-46.400048-20.800306-46.400048-46.400048 0-25.599742 20.800306-46.400048 46.400048-46.400049h78.399726c25.599742 0 46.400048 20.800306 46.400048 46.400049s-20.798244 46.400048-46.400048 46.400048z m-79.998163-59.19992a14.340558 14.340558 0 0 0-14.400371 14.400371 14.340558 14.340558 0 0 0 14.400371 14.400371h78.399726a14.340558 14.340558 0 0 0 14.400371-14.400371 14.340558 14.340558 0 0 0-14.400371-14.400371h-78.399726z"
              fill="#193651" p-id="5937"></path>
            <path
              d="M471.998856 780.800387h-54.400483c-16.00087 0-30.399178-12.799871-30.399179-30.399179 0-16.00087 12.799871-30.399178 30.399179-30.399178h54.400483c16.00087 0 30.399178 12.799871 30.399178 30.399178 0.002062 17.599307-14.398308 30.399178-30.399178 30.399179z"
              fill="#FFFFFF" p-id="5938"></path>
            <path
              d="M471.998856 796.799194h-54.400483c-25.599742 0-46.400048-20.800306-46.400049-46.400048 0-25.599742 20.800306-46.400048 46.400049-46.400048h54.400483c25.599742 0 46.400048 20.800306 46.400048 46.400048 0 27.200242-20.798244 46.400048-46.400048 46.400048z m-54.398421-59.199919c-8.000435 0-14.400371 6.399936-14.400371 14.400371s6.399936 14.400371 14.400371 14.40037h54.400483c8.000435 0 14.400371-6.399936 14.400371-14.40037s-6.399936-14.400371-14.400371-14.400371h-54.400483z"
              fill="#193651" p-id="5939"></path>
            <path
              d="M471.998856 841.598743h-35.200677c-16.00087 0-30.399178-12.799871-30.399178-30.399178 0-16.00087 12.799871-30.399178 30.399178-30.399178h35.200677c16.00087 0 30.399178 12.799871 30.399178 30.399178 0.002062 16.00087-14.398308 30.399178-30.399178 30.399178z"
              fill="#FFFFFF" p-id="5940"></path>
            <path
              d="M471.998856 857.599613h-35.200677c-25.599742 0-46.400048-20.800306-46.400048-46.400048 0-25.599742 20.800306-46.400048 46.400048-46.400048h35.200677c25.599742 0 46.400048 20.800306 46.400048 46.400048s-20.798244 46.400048-46.400048 46.400048z m-35.198614-60.800419c-8.000435 0-14.400371 6.399936-14.400371 14.400371s6.399936 14.400371 14.400371 14.400371h35.200676c8.000435 0 14.400371-6.399936 14.400371-14.400371s-6.399936-14.400371-14.400371-14.400371h-35.200676z"
              fill="#193651" p-id="5941"></path>
            <path
              d="M679.999855 182.399194H342.399646s-70.399291 233.600741 124.799774 363.199952c8.000435 4.799436 12.799871 14.400371 12.799871 22.400806v324.800338h63.999355V569.600451c0-9.600935 4.799436-17.599307 12.799872-22.400805 193.600628-131.19971 123.201337-364.800451 123.201337-364.800452z"
              fill="#FDBF5E" p-id="5942"></path>
            <path
              d="M542.400209 908.799098h-63.999355c-9.600935 0-16.00087-6.399936-16.00087-16.00087V569.600451c0-3.200999-1.6005-8.000435-4.799436-9.600934-203.1995-135.999146-131.19971-379.200822-131.19971-382.399759 1.6005-6.399936 8.000435-11.199372 16.00087-11.199371h337.600209c6.399936 0 12.799871 4.799436 16.000871 11.199371 0 3.200999 71.999791 246.400612-131.19971 382.399759-3.200999 1.6005-4.799436 6.399936-4.799436 9.600934v324.800339c-1.604625 7.998373-8.00456 14.398308-17.603433 14.398308z m-46.400048-31.999678H527.999839V569.600451c0-14.400371 8.000435-28.800741 19.199807-36.799114 158.399952-105.599968 131.19971-287.999162 120.000338-334.39921H355.199517c-11.199372 48.000548-40.000113 227.200806 120.000338 334.39921 12.799871 8.000435 19.199807 22.400806 19.199807 36.799114v307.198969h1.600499z"
              fill="#193651" p-id="5943"></path>
            <path
              d="M380.799259 478.400854h-3.200999c-201.599001-33.600177-192.000129-260.79892-192.000129-262.39942 0-8.000435 8.000435-14.400371 16.00087-14.400371h134.400709c4.799436 0 9.600935 1.6005 12.799871 6.399936 3.200999 3.200999 4.799436 8.000435 3.200999 12.799871-8.000435 51.199484-14.400371 148.799017 43.199049 235.199178 3.200999 4.799436 3.200999 12.799871 0 17.599307-3.198937 1.6005-8.000435 4.801499-14.40037 4.801499z m-161.598888-246.400612c1.6005 43.199049 16.00087 166.400387 129.59921 204.8-38.399613-75.20079-38.399613-153.600516-31.999678-204.8h-97.599532zM641.600242 478.400854c-4.799436 0-11.199372-3.200999-12.799871-8.000435-3.200999-4.799436-3.200999-12.799871 0-17.599307 57.59942-86.400161 51.199484-183.999694 43.199049-235.199178 0-4.799436 0-9.600935 3.200999-12.799872 3.200999-3.200999 8.000435-6.399936 12.799871-6.399935h132.80021c8.000435 0 16.00087 6.399936 16.00087 14.400371 0 1.6005 9.600935 228.799243-192.000129 262.399419-1.6005 3.198937-3.200999 3.198937-3.200999 3.198937z m63.999355-246.400612c6.399936 51.199484 6.399936 129.59921-31.999678 204.8 115.200902-40.000113 128.000773-161.600951 129.599211-204.8h-97.599533z"
              fill="#193651" p-id="5944"></path>
            <path
              d="M619.199436 892.80029H403.200064s-43.199049 91.199597-81.600725 115.200902h382.399759c-41.59855-24.001305-84.799662-115.200902-84.799662-115.200902z"
              fill="#E1E6E9" p-id="5945"></path>
            <path
              d="M702.400661 1024H320.000902c-6.399936 0-12.799871-4.799436-16.00087-11.199372-1.6005-6.399936 1.6005-14.400371 6.399936-17.599307 28.800741-17.599307 65.599855-84.799662 76.799226-108.800967 3.200999-4.799436 8.000435-9.600935 14.400371-9.600934h217.599871c6.399936 0 11.199372 3.200999 14.400371 9.600934 11.199372 23.999243 48.000548 89.599098 76.799226 108.800967 6.399936 3.200999 9.600935 11.199372 6.399936 17.599307-1.598437 6.399936-7.998373 11.199372-14.398308 11.199372zM359.998953 992.000322h302.399532c-23.999243-28.800741-43.199049-65.599855-52.799984-83.199162h-196.799564c-9.598872 17.599307-28.798679 54.398421-52.799984 83.199162z"
              fill="#193651" p-id="5946"></path>
            <path
              d="M511.998969 254.398985l27.200241 56.000983 60.800419 8.000435-44.799548 43.199049 11.199371 60.800419-54.400483-28.800741-55.998921 28.800741 11.199372-60.800419-44.799549-43.199049 62.400919-8.000435zM628.800371 795.200757c-62.400918-40.000113-38.399613-108.800967-38.399614-108.800966l-57.59942-11.199372c-31.999678-8.000435-54.400483-36.799114-54.400483-68.800854 0-16.00087 16.00087-27.200242 31.999678-20.800306 22.400806 9.600935 76.799227 20.800306 113.600403 19.199806 12.799871 0 25.599742 1.6005 38.399613 6.399936l67.200354 22.400806v179.200257l-124.799774 30.399179h-62.400919"
              fill="#FFFFFF" p-id="5947"></path>
            <path
              d="M606.399565 857.599613h-62.400919c-9.600935 0-16.00087-6.399936-16.00087-16.00087s6.399936-16.00087 16.00087-16.00087h60.800419l110.399404-27.200242v-155.201015l-56.000983-19.199806c-11.199372-3.200999-22.400806-4.799436-31.999677-4.799436-40.000113 1.6005-95.999033-9.600935-120.000339-20.800307-3.200999-1.6005-4.799436 0-6.399935 0-1.6005 0-3.200999 3.200999-3.200999 6.399936 0 25.599742 17.599307 46.400048 41.600612 52.799984l56.000983 11.199371c4.799436 1.6005 8.000435 3.200999 11.199371 8.000435 1.6005 4.799436 3.200999 9.600935 1.6005 12.799872 0 1.6005-19.199807 57.59942 31.999678 89.599097 8.000435 4.799436 9.600935 14.400371 4.799436 22.400806s-14.400371 9.600935-22.400806 4.799436c-48.000548-30.399178-52.799984-78.399726-48.000548-110.399404l-41.600612-8.000435c-40.000113-9.600935-67.200354-44.799549-67.200355-84.799662 0-12.799871 6.399936-25.599742 17.599308-31.999677 11.199372-8.000435 23.999243-8.000435 36.799113-3.200999 20.800306 9.600935 71.999791 19.199807 107.200468 17.599307 14.400371 0 28.800741 1.6005 43.199049 6.399935l67.200354 22.400806c6.399936 1.6005 11.199372 8.000435 11.199372 14.400371v179.200257c0 8.000435-4.799436 14.400371-12.799871 16.000871l-124.799775 30.399178c-3.192749 3.203062-3.192749 3.203062-4.793248 3.203061z"
              fill="#193651" p-id="5948"></path>
            <path d="M729.59884 582.400322h228.799243v263.99992H729.59884z" fill="#FFFFFF" p-id="5949"></path>
            <path
              d="M958.400145 862.399049H729.59884c-9.600935 0-16.00087-6.399936-16.00087-16.00087v-263.999919c0-9.600935 6.399936-16.00087 16.00087-16.00087h228.799243c9.600935 0 16.00087 6.399936 16.00087 16.00087v263.999919c0 9.600935-6.399936 16.00087-15.998808 16.00087z m-212.800435-31.999677h196.799565V598.39913h-196.799565v232.000242z"
              fill="#193651" p-id="5950"></path>
            <path d="M783.040261 646.224365h121.600838v139.200145h-121.600838z" fill="#F16051" p-id="5951"></path>
          </svg>
          <p class="winText">WIN!</p>
        </div>
        <div class="gameResult" v-if="currentPlayer.rolestatus === 4">
          <svg t="1595094289303" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
               p-id="6141" width="200" height="200">
            <path
              d="M513.9 127.73c202.43 0 366.69 165.45 366.69 369.77 0 134.94-72.32 236.61-195.13 286.17l-7.59 2.96-26.12 9.93-7.23 50.42-0.66 3.63c-4.52 20.25-21.68 35.22-42.36 36.93l-3.93 0.17H430.18l-3.7-0.14c-20.68-1.62-37.91-16.49-42.52-36.72l-0.71-3.84-7.23-50.44-26.12-9.93-7.59-2.96c-122.78-49.54-195.15-151.23-195.15-286.17 0-204.32 164.26-369.77 366.72-369.77l0.02-0.01zM336.12 366.24c-58.91 0-106.67 47.76-106.67 106.67s47.76 106.67 106.67 106.67 106.67-47.76 106.67-106.67-47.76-106.67-106.67-106.67z m320-47.41c-65.46 0-118.52 53.06-118.52 118.52s53.06 118.52 118.52 118.52 118.52-53.06 118.52-118.52-53.07-118.52-118.52-118.52z"
              fill="#CFD7DC" p-id="6142"></path>
            <path
              d="M513.9 80.3c-228.71 0-414.12 186.78-414.12 417.18 0 165.09 95.19 281.03 233.31 333.48l3.27 22.76c6.68 46.71 46.68 81.4 93.87 81.4h167.35c47.19 0.01 87.21-34.68 93.89-81.4l3.25-22.76C832.83 778.51 928 662.58 928 497.48 928 267.08 742.61 80.3 513.9 80.3z m163.98 706.36l-26.12 9.93-7.23 50.42-0.66 3.63c-4.83 21.68-24.06 37.09-46.27 37.1l-7.4-0.02 18.06-90.17 0.38-2.75c0.92-11.92-7.19-22.66-18.91-25.05-12.83-2.61-25.34 5.68-27.95 18.51l-19.91 99.46H490.2V792.9l-0.17-2.77c-1.42-11.91-11.51-20.89-23.51-20.9-13.09-0.01-23.71 10.59-23.73 23.68v94.81H430.2l-3.7-0.14c-22.13-1.73-40.1-18.58-43.24-40.56l-7.23-50.44-26.12-9.93-7.58-2.96c-122.81-49.56-195.15-151.23-195.15-286.2 0-183.61 132.69-335.88 306.56-364.8l7.92 25.55-55.89 38.02-2.2 1.68c-8.39 7.27-10.62 19.38-5.36 29.16l25.29 46.93 1.45 2.37c6.89 9.85 20.06 12.99 30.65 7.3l2.37-1.47c9.85-6.89 12.97-20.07 7.28-30.65l-15.17-28.14 52.76-35.84 2.2-1.73a23.708 23.708 0 0 0 7.11-24.89l-10.24-33.07c3.98-0.14 7.96-0.21 11.99-0.21v0.05c202.45 0 366.72 165.45 366.72 369.77-0.01 137.7-75.34 240.76-202.74 289.14z"
              p-id="6143"></path>
            <path d="M656.12 437.35m-118.52 0a118.52 118.52 0 1 0 237.04 0 118.52 118.52 0 1 0-237.04 0Z" fill="#B3BFC5"
                  p-id="6144"></path>
            <path
              d="M510.58 564.3c5.47 2.12 9.97 6.19 12.61 11.43l40.79 80.73c5.92 11.68 1.25 25.94-10.43 31.86a23.677 23.677 0 0 1-12.18 2.51l-70.33-4.36c-13.07-0.81-23-12.05-22.2-25.12 0.15-2.43 0.67-4.82 1.55-7.09l29.51-76.4c4.72-12.21 18.44-18.28 30.65-13.57 0.02 0.01 0.02 0.01 0.03 0.01zM336.12 318.83c-85.09 0-154.07 68.98-154.07 154.07s68.98 154.07 154.07 154.07c85.09 0 154.07-68.98 154.07-154.07s-68.98-154.07-154.07-154.07z m0 260.74c-58.91 0-106.67-47.76-106.67-106.67s47.76-106.67 106.67-106.67c58.91 0 106.67 47.76 106.67 106.67s-47.76 106.67-106.67 106.67z"
              p-id="6145"></path>
            <path d="M336.12 472.9m-106.67 0a106.67 106.67 0 1 0 213.34 0 106.67 106.67 0 1 0-213.34 0Z" fill="#B3BFC5"
                  p-id="6146"></path>
            <path
              d="M656.12 271.42c-91.64 0-165.92 74.29-165.92 165.92s74.29 165.92 165.92 165.92c91.64 0 165.92-74.29 165.92-165.92s-74.29-165.92-165.92-165.92z m0 284.44c-65.45 0-118.52-53.06-118.52-118.52s53.06-118.52 118.52-118.52 118.52 53.06 118.52 118.52-53.07 118.52-118.52 118.52z"
              p-id="6147"></path>
          </svg>
          <p class="loseText">Lose~</p>
        </div>
        <p class='hintText'>
          点我，敲我
        </p>
      </div>
    </van-overlay>
  </div>
</template>

<script>
  import {Dialog} from 'vant';

  export default {
    name: "RoleShow.vue",
    data: function () {
      return {
        timer: 0,
        playerId: JSON.parse(window.localStorage.getItem("roleID")),//该房间当前玩家uuid
      }
    },
    computed: {
      otherPlayers() {
        return this.$store.state.Players
      },
      currentPlayer() {
        return {
          roleId: this.$store.state.playerIndex,   //该玩家ID
          rolestatus: this.$store.state.playerStatus,  //该玩家状态(0---等待中，1--活，2--死，3--胜利，4--失败)
          rolename: this.$store.state.playerRole, ///该玩家角色(1--村民、2--女巫、3--预言家、4--猎人、6--狼人)
          role: '',   //角色名,女巫、狼人等
          playerimage: '', //该玩家角色图片路径
          playerskill: '',//角色技能描述
          // //测试用例
          //rolestatus: '3',
          //rolename: 2,
        }
      },
    },
    watch: {
      currentPlayer(oldValue, newValue) {
        console.log('111');
        if (oldValue.rolename === 6) { //狼人
          this.currentPlayer.playerimage = `../../static/img/langren.jpg`;
          this.currentPlayer.playerskill = '白天装作好人混淆视听，夜晚袭击村民，霸占村庄。';
          this.currentPlayer.role = '狼人';
        } else if (oldValue.rolename === 1) { //村民
          this.currentPlayer.playerimage = `../../static/img/pingming.jpg`;
          this.currentPlayer.playerskill = '无特殊技能，一觉睡到天亮。';
          this.currentPlayer.role = '村民';
        } else if (oldValue.rolename === 3) { //预言家
          this.currentPlayer.playerimage = `../../static/img/yuyanjia.jpg`;
          this.currentPlayer.playerskill = '每天晚上可以查验一名玩家的身份是好人还是狼人。';
          this.currentPlayer.role = '预言家';
        } else if (oldValue.rolename === 2) { //女巫
          this.currentPlayer.playerimage = `../../static/img/nvwu.jpg`;
          this.currentPlayer.playerskill = '有两瓶药，解药可以救人，毒药可以杀人。';
          this.currentPlayer.role = '女巫';
        } else if (oldValue.rolename === 4) { //猎人
          this.currentPlayer.playerimage = `../../static/img/lieren.jpg`;
          this.currentPlayer.playerskill = '死的时候可以带走场上任意一名玩家';
          this.currentPlayer.role = '猎人';
        }
      }
    },
    methods: {
      //退出房间
      outRoom() {
        const playerId = this.playerId;
        Dialog.confirm({
          title: "",
          message: "确定退出吗"
        }).then(
          () => {
            this.$store.dispatch("OutRoom", playerId);
            this.$router.back();
          }
        ).catch(() => {
        })
      },
      //状态刷新
      refreshStatus() {
        const playerId = this.playerId;
        this.$store.dispatch("refreshStatus", playerId)
      },
      //轮询
      loop() {
        const playerId = this.playerId;
        if (this.$route.path === "/roleshow") {
          this.timer = setInterval(() => {
            this.$store.dispatch("loopPlayerStatus", playerId);
          }, 3000);
        }
      },
      toSelectMVP() {   //玩家点击浮层，会进入选MVP的页面
        this.showResult = false;
        clearInterval(this.timer); //清除定时器
        this.$router.push('/selectMVP');
      }
    },
    created() {
      //let currPlayer = this.currentPlayer;
      this.loop();
    }
  }
</script>

<style scoped>
  img {
    width: 50%;
  }

  .main {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
  }

  .container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 45px;
    left: 0;
    z-index: -1;
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
    overflow-x: hidden;
    overflow-y: scroll;
  }

  .showotherplayer {
    flex: 1 1 auto;
    vertical-align: middle;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    -webkit-flex-direction: row;
    align-items: center;
    -webkit-align-items: center;
    width: 100%;
    height: auto;
    margin: 30px 0px 50px 0px;
  }

  .singlePlayer {
    width: 20%;
    height: 15%;
    display: inline-block;
    margin: 5%;
    vertical-align: top;
  }

  .singlePlayer > img {
    width: 100%;
    height: 100%;
  }

  .otherPlayers {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .died {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
  }

  .username {
    display: inline-block;
    word-break: break-all;
    height: 15%;
  }

  .preparing {
    height: 30%;
    padding-top: 10%;
  }

  .showcurrentplayer {
    height: auto;
    width: 100%;
    color: white;
    background-color: rgba(0, 0, 0, 0.7);
  }

  .right {
    width: 50%;
    float: right;
    font-size: 1rem;
    padding-top: 5%;
  }

  .rolename {
    font-size: 20px;
    color: red;
  }

  .status {
    height: 15%;
  }

  .status > label {
    height: 5%;
    color: red;
  }

  .skill {
    font-size: 16px;
  }

  .overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    flex-direction:column; 
  }

  .gameResult {
    width: 300px;
    height: 300px;
    font-size: 120px;
    /*position: relative;*/
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction:column; 
  }

.gameResult > p {
    font-weight: bold;
    font-size: 20%;
    margin: 10px 0;
}
 .winText {
    color: Orange;
  }
  .loseText {
    color: #dcdcdc;
  }
  .hintText {
    padding: 1rem;
    font-weight: bold;
    font-size: 10rem;
    background: #faf0e6;
    color: #454545;
    box-shadow: 3px 3px 3px #888888;
    border: 1px solid gray;
  }
  .footer {
    position: absolute;
    right: 0;
    left: 0;
    height: 36px;
    bottom: 5%;
  }

  .button_left {
    width: 30%;
    min-width: 110px;
    height: 36px;
    cursor: pointer;
    position: absolute;
    bottom: 5%;
    left: 10%;
    font-family: "Berlin Sans FB Demi";
    font-size: 16px;
  }

  .button_right {
    width: 30%;
    min-width: 110px;
    height: 36px;
    cursor: pointer;
    position: absolute;
    bottom: 5%;
    right: 10%;
    font-family: "Berlin Sans FB Demi";
    font-size: 16px;
  }
</style>
